<style rel="stylesheet/scss" lang="scss" scoped>
.mid {
  line-height: 140px;
}
</style>
<template>
<div class="app-container calendar-list-container">
      <img-list v-model="imgData.dialogVisible" :img-list="imgData.imgArr" :img-index="imgData.imgIndex"></img-list>
  <div class="pds-tip">
    <div class="title">
      客户货号档案
    </div>
  </div>
  <div class="">
    <el-button class="filter-item" type="success" icon="search" size="small" @click="$router.push({path:'/sale/model/add'})">新增</el-button>
    <!-- <el-button class="filter-item" type="warning" icon="search" size="small">导入</el-button> -->
    <div class="fr" style="display:block">
      <el-input placeholder="请输入机型全码" style="width: 200px;" class="filter-item" v-model="pageData.params.customerModelNo"></el-input>
      <el-button class="filter-item" type="primary" icon="search" size="small" @click="search()">查询</el-button>
    </div>
  </div>
  <div class="mt-30">
    <el-table class="" border fit highlight-current-row style="width: 100%" :data="pageData.list">
      <el-table-column align="center" label="序号" type="index">
        <template slot-scope="scope">
            <!-- {{scope.$index + pageData.start}} -->
            {{scope.$index+1+(pageData.params.page-1)*pageData.params.limit}}
          </template>
      </el-table-column>
      <el-table-column align="center" label="客户" prop="customerShortName"></el-table-column>
      <el-table-column align="center" label="客户型号" prop="customerModel"></el-table-column>
      <el-table-column align="center" label="产品型号" prop="modelNo"></el-table-column>
      <el-table-column align="center" label="产品名称" prop="name"></el-table-column>
      <el-table-column align="center" label="产品图片">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="previewImg(scope.row.pdsFileArticlePcsPicsList)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建人" prop="createUserName"></el-table-column>
      <el-table-column align="center" label="创建日期" prop="createTime">
      </el-table-column>
   <el-table-column width="" align="center" label="编辑状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">草稿</span>
            <span v-if="scope.row.status==1">审核中</span>
            <span v-if="scope.row.status==2">已发布</span>
            <span v-if="scope.row.status==3">已删除</span>
            <span v-if="scope.row.status==3">驳回</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250px" fixed="right">
          <template slot-scope="scope">
              <el-button-group>
              <el-button size="small" type="success" @click="$router.push({path:'/sale/model/detail',query:{modelPbsId:scope.row.id}})">查看</el-button>
              <el-button size="small" type="primary" @click="$router.push({path:'/sale/model/edit',query:{articlePcsId:scope.row.id}})" v-if="scope.row.status==0 || scope.row.status==4">编辑</el-button>
              <el-button size="small" type="primary" @click="handleChange(scope.row.id)" v-if="scope.row.status==2">变更</el-button>
              <el-button size="small" type="info" @click="$router.push({path:'model/Filepgf',query:{modelPbsId:scope.row.id}})">文档</el-button>
              <el-button  size="small" type="danger" v-if="scope.row.status==0 || scope.row.status==4" @click="handleDelete(scope.row)">删除
              </el-button>
              <el-button  size="small" type="warning" v-if="scope.row.status==2" @click="$router.push({path:'/sale/model/detail',query:{modelPbsId:scope.row.id,type:'export'}})">导出
              </el-button>
              </el-button-group>
            </template>
        </el-table-column>
    </el-table>
  <pagination :pageData="pageData.params" @pageChange="changePage" @changeSize="changeSize"></pagination>
  </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/sale/model/index';

export default {
  name: 'user',
  components: {

  },
  data() {
    return {
      imgData: {
        dialogVisible: false,
        imgArr: [],
        imgIndex: 0
      },
      pageData: {
        params: {
          page: 1,
          limit: 10,
          total: 0
        },
        list: []
      }
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  methods: {
    previewImg(imgArr, index) {
      this.imgData.dialogVisible = true
      this.imgData.imgArr = imgArr
      this.imgData.imgIndex = index || 0
    },
    search() {
      this.pageData.params.page = 1
      this.getList()
    },
    changePage(pageData) {
      this.pageData.params.page = pageData.page;
      this.getList();
    },
    changeSize(pageSize) {
      this.pageData.params.limit = pageSize;
      this.pageData.params.page = 1;
      this.getList();
    },
    handleDelete(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        const params = { articlePcsId: row.id };
        api.removePlan(params).then(response => {
          console.log(response)
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }
        })
      })
    },
        // 变更
    handleChange (modelId) {
        const params = {
          id: modelId
        };
        api.updateAuth(params).then(response => {
          console.log(response);
          if (response.code === 200) {
            this.$message({
              type: "success",
              message: "发起成功!"
            });
          }
        });  
    },
    getList() {
      const params = Object.assign({}, this.pageData.params);
      delete params.total;
      api.pageList(params).then(response => {
        if (response.code == 200) {
          this.pageData.list = response.data.rows;
          this.pageData.params.total = response.data.total;
        }
      });
    }
  }
};
</script>
